<template>
	<view>
		
		<view class="item" style="flex-direction: column;align-items: flex-end;" v-if="dataBean.approveStatusStr">
			<text
				style="color: #FFC000;font-size: 30rpx;margin: 20rpx 20rpx 10rpx 0;">{{dataBean.approveStatusStr|filterNull}}</text>
			<text v-if="dataBean.approveStatusRemark"
				style="color: #FF623D;font-size: 26rpx;margin: 0 20rpx 10rpx 0;">{{dataBean.approveStatusRemark|filterNull}}</text>
		</view>
		
		<view class="item">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="收车信息" label-color="#333333"
					:customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<!-- <text style="line-height: 80rpx; color: #E93131;">{{dataBean.carOutInsurance.repairStatusShow|filterNull}}</text> -->
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view >
				<view class="text-line">
					<text class="text-name">车牌号:</text>
					<text class="text-value">{{dataBean.carPlateNo|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">车架号:</text>
					<text class="text-value">{{dataBean.vinNo|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">品牌/车系/车型:</text>
					<text class="text-value">{{dataBean.modelName|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">当前客户名称:</text>
					<text class="text-value">{{dataBean.customerName|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">当前客户联系电话:</text>
					<text class="text-value">{{dataBean.customerPhone|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">当前订单编号:</text>
					<text class="text-value">{{dataBean.orderNo|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">订单类型:</text>
					<text class="text-value">{{dataBean.bizObjTypeStr|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">租期:</text>
					<text class="text-value">{{dataBean.tenancy|filterNull}}</text>
				</view>
				
				<u-line color="#efefef" :customStyle="{'margin': '20rpx 0','display': 'block',}"></u-line>

				<view class="text-line">
					<text class="text-name">收车处理人:</text>
					<text class="text-value">{{dataBean.handlerName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">收车时间:</text>
					<text class="text-value">{{dataBean.collectTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">强制收车原因:</text>
					<text class="text-value">{{dataBean.collectReasonName|filterNull}}</text>
				</view>

				<picPdf :attachment="dataBean.collectFileList"></picPdf>

			</view>


		</view>

		<examflow :from="pageType" :instanceId="instanceId" approvalName="carCollectApprove" :isAdd="false">
		</examflow>

		<view style="height: 100rpx;"></view>

		<view class="button-container" v-if="'myexam'==pageType">
			<button class="btn-item" @click="bottomClick(2)">审核驳回</button>
			<button class="btn-item" @click="bottomClick(3)">审核通过</button>
		</view>

	</view>
</template>

<script>
	import picPdf from '@/components/pic-pdf.vue';
	import examflow from '@/components/exam-flow.vue';
	import {
		collect_handle
	} from '@/common/http.api.js';

	export default {
		components: {
			picPdf,
			examflow
		},

		data() {
			return {
				dataBean: {
				},
				carId: '',
				pageType: '',
				approveId: '',
				businessId: '',
				instanceId: '',
			}
		},
		methods: {

			bottomClick(type) {
				switch (type) {
					case 2: //审核驳回
						uni.redirectTo({
							url: '/pagesA/exam/exam-flow?type=3&processKey=carCollectApprove&approveId=' + this
								.approveId + '&url=' + collect_handle
						})
						break;
					case 3: //审核通过
						uni.redirectTo({
							url: '/pagesA/exam/exam-flow?type=4&processKey=carCollectApprove&approveId=' + this
								.approveId + '&url=' + collect_handle
						})
						break;
				}

			},
		},

		onLoad(op) {
			this.carId = op.carId;
			this.pageType = op.pageType;
			this.approveId = op.approveId;
			this.businessId = op.businessId;
			this.instanceId = op.instanceId;

		},
		onShow() {
			this.$u.api.collectDetail(this.businessId).then(
				res => {
					this.dataBean = res;
				}

			);
		},
	}
</script>

<style lang="scss" scoped>
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx;
	}

	.nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 200rpx;
			height: 100rpx;
		}

		text {
			margin-top: 35rpx;
			margin-bottom: 60rpx;
			font-size: 24rpx;
			color: #C5D3E8;
		}
	}

	// .button-container {
	// 	display: flex;
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100rpx;
	// 	bottom: 0;
	// 	z-index: 999;
	// 	background-color: white;
	// 	padding: 0 20rpx 0 0;
	// 	box-sizing: border-box;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;

	// 	button {
	// 		flex: 1;
	// 		margin-left: 20rpx;
	// 		height: 80rpx;
	// 		line-height: 80rpx;
	// 		border-radius: 40rpx;
	// 		color: $xz-bgColor-write;
	// 		background-color: $xz-bgColor-blue;
	// 		font-size: 32rpx;
	// 	}

	// }
</style>
